<template>
  <div class="cj-box">
    <el-row type="flex" justify="center" style="padding-top: 70px">
      <el-col :span="7">
        <el-card class="cj-box-card">
          <div class="cj-content-title">活动规则</div>
          <div style="height: 280px; overflow:hidden">
            <div class="cj-content-text">1.用户每天有三次免费抽奖的机会</div>
            <div class="cj-content-text">2.免费机会使用完后，消耗20积分参与一次抽奖</div>
            <div class="cj-content-text">3.中奖积分会自动派发到您的账户，请在个人中心查看；</div>
            <div class="cj-content-text">4.抽中实物奖品请前往购物车从查看（发奖延迟一般在5分钟左右）；</div>
            <div class="cj-content-text">5.实物奖品需要用户自行承担邮费；</div>
            <div
              class="cj-content-text"
            >6.在本次活动期间，如用户存在违规行为（含软件作弊，通过系统漏洞、利用黑客工具等），将取消用户参与活动的资格及中奖资格，严重违规者将追究法律责任！</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <lottery
          @lotteryClick="lotteryClick"
          @lotteryDone="lotteryDone"
          :lottery-start="lotteryStart"
          :lottery-prizenum="8"
          :lottery-prizeno="luckyValue"
          :lottery-bg="require('@/assets/turnplate-bg.png')"
          :content-bg="require('@/assets/turntable.png')"
          :pointer-bg="require('@/assets/pointer.png')"
          :lottery-width="['85%','35%']"
        />
      </el-col>
      <el-col :span="7">
        <el-card class="cj-box-card">
          <div class="cj-content-title">最新中奖名单</div>
          <div ref="scrolldiv" style="height: 280px; overflow:hidden">
            <div ref="scroll1">
              <div class="cj-content-text" v-for="item in zjList">
                <span>{{item.username}}</span>
                <span>中奖</span>
                <span>{{item.integral}}积分</span>
              </div>
            </div>
            <div ref="scroll2">
              <div class="cj-content-text" v-for="item in zjList">
                <span>{{item.username}}</span>
                <span>中奖</span>
                <span>{{item.integral}}积分</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { log } from "util";
import lottery from "@/components/Lottery";
export default {
  name: "integral_Lottery",
  components: {
    lottery
  },
  data() {
    return {
      myVar: null,
      lotteryStart: 0,
      luckyValue: 1,
      luckyMsg: "",
      zjList: []
    };
  },
  methods: {
    lotteryClick() {
      this.$http
        .post("/integral/lucky", {})
        .then(res => {
          this.lotteryStart = 1;
          this.luckyValue = 9 - res.data;
          this.luckyMsg = res.msg;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    lotteryDone() {
      this.lotteryStart = 0;
      this.$message({
        message: this.luckyMsg,
        type: "success"
      });
    },
    roll(t) {
      this.$refs.scrolldiv.scrollTop = 0;
      this.myVar = setInterval(() => {
        if (this.$refs.scrolldiv.scrollTop >= this.$refs.scroll1.scrollHeight) {
          this.$refs.scrolldiv.scrollTop = 0;
        } else {
          this.$refs.scrolldiv.scrollTop++;
        }
      }, t);
    }
  },
  mounted() {
    this.$http
      .post("/integral/winners", {})
      .then(res => {
        this.zjList = res.data;
        this.roll(50);
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
  },
  beforeDestroy() {
    window.clearInterval(this.myVar);
  }
};
</script>
<style scoped>
.cj-box-card {
  margin: 30px;
}
.cj-content-text {
  font-size: 13px;
  margin-top: 5px;
}
.cj-content-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cj-box {
  height: 620px;
  background-color: #da2549;
  border-radius: 10px;
}
.anim {
  transition: all 0.5s;
}
</style>

